<template>
	<view>
		<view class="head">
		</view>
		<image :src="user.avatar" mode="aspectFill" class="avatar"></image>
		<view class="btn" v-if="this.$store.state.user.uid !== user.uid">
			<view v-if="!isSubscribe" class="sub" @click="sub">
				<uni-icons type="plusempty" size="25" color="#FFFFFF"></uni-icons>
				关注
			</view>
			<view v-else class="sub" @click="unSub">
				取消关注
			</view>
			<view class="chat" @click="chat">
				<uni-icons type="chat" size="25" color="#19A3FE"></uni-icons>
				私信
			</view>
		</view>
		<view class="padding">
		</view>
		<view class="body">
			<view class="username">
				{{user.username}}
			</view>
			<view class="uid">
				ID: {{user.uid}}
			</view>
			<view class="div mar"></view>
			<view>
				<view class="inf" @click="hisFans">
					<text class="num">{{fans}}</text>粉丝
				</view>
				<view class="inf" @click="hisSubscribe">
					<text class="num">{{subcribe}}</text>关注
				</view>
				<view class="inf">
					<text class="num">{{post}}</text>发帖
				</view>
			</view>
		</view>
		<view class="div_h">
		</view>
		<view class="">
			<view class="item">
				发布
			</view>
			<view class="card" v-for="(post,index) in postList" :key="index">
				<singlePost :showUser="false" :index=index :post="post" :isLiked="likes[index]"
					@onClick="onClick($event,post,index)" @updateLikes="updateIsliked" />
			</view>
			<view class="more" v-if="!more">
				到底了~~~
			</view>
		</view>
	</view>
</template>

<script>
	import singlePost from "@/components/single-post.vue"
	export default {
		components: {
			singlePost
		},
		data() {
			return {
				user: {
					username: "加载中...",
					avatar: "../../static/logo.png"
				},
				fans: 0,
				subcribe: 0,
				post: 0,
				postList: [],
				more: true,
				likes: [],
				isSubscribe: false,
			}
		},
		methods: {
			updateIsliked(params) {
				this.$set(this.likes, params.index, params.isLiked)
			},
			isSubscribeFun(uid) {
				this.$request.TokenRequest({
					url: "/user/isSubscribe"
				}, {
					BUid: uid
				}).then(res => {
					console.log(res)
					if (res.state === 200) {
						this.isSubscribe = res.data.isSubscribe == 1 ? true : false
					}
				})
			},
			sub() {
				console.log("关注" + this.user.uid);
				this.$request.TokenRequest({
					url: "/user/SubscribeUser"
				}, {
					BUid: this.user.uid
				}).then(res => {
					if (res.state === 200) {
						uni.showToast({
							icon: "success",
							title: "关注成功!"
						})
						this.isSubscribe = true
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			unSub() {
				console.log("取消关注" + this.user.uid);
				this.$request.TokenRequest({
					url: "/user/UnSubscribeUser"
				}, {
					BUid: this.user.uid
				}).then(res => {
					if (res.state === 200) {
						uni.showToast({
							icon: "success",
							title: "取消关注成功!"
						})
						this.isSubscribe = false
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			chat() {
				uni.navigateTo({
					url: "../chat/chat?uid=" + this.user.uid + "&name=" + this.user.username
				})
			},
			unLike(pid, index) {
				console.log("取消点赞" + pid);
				this.$request.TokenRequest({
					url: "/post/UnLikePost"
				}, {
					pid: pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200) {
						this.$set(this.likes, index, false)
						this.$set(this.postList[index], "likes", this.postList[index].likes - 1)
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			like(pid, index) {
				console.log("like" + pid)
				this.$request.TokenRequest({
					url: "/post/likePost"
				}, {
					pid: pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200) {
						console.log("点赞成功")
						this.$set(this.likes, index, true)
						this.$set(this.postList[index], "likes", this.postList[index].likes + 1)
						// this.likes[index] = true;
						// this.postList[index].likes += 1;
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
						uni.navigateBack({})
					}
				})
			},
			watchPost(pid) {
				uni.navigateTo({
					url: "../post/post?pid=" + pid
				})
			},
			onClick(type, post, index) {
				console.log(type)
				if (["content", 'view', 'comment'].indexOf(type) > -1) this.watchPost(post.pid)
				if (type === "like") this.like(post.pid, index)
				if (type === "unlike") this.unLike(post.pid, index)
				if (type === "user") this.watchUser(post.uid)
			},
			getUserInfo(uid) {
				this.$request.TokenRequest({
					url: "/user/getUserInfoByUid"
				}, {
					uid: uid
				}).then(res => {
					if (res.state === 200) {
						this.user = res.data;
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			getFans(uid) {
				this.$request.TokenRequest({
					url: "/user/myBeSubscribedNum"
				}, {
					uid: uid,
				}).then(res => {
					if (res.state === 200)
						this.fans = res.data.num
				})
			},
			getSubsribe(uid) {
				this.$request.TokenRequest({
					url: "/user/mySubscribeNum"
				}, {
					uid: uid,
				}).then(res => {
					if (res.state === 200)
						this.subcribe = res.data.num
				})
			},
			getPost(uid) {
				this.$request.TokenRequest({
					url: "/user/myPostNum"
				}, {
					uid: uid,
				}).then(res => {
					if (res.state === 200)
						this.post = res.data.num
				})
			},
			getPostList(uid, date) {
				this.$request.TokenRequest({
					url: "/post/getPostListByUid"
				}, {
					uid: uid,
					date: date
				}).then(res => {
					if (res.state === 200) {
						this.postList = this.postList.concat(res.data)
						if (res.message === "false") {
							this.more = false
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			getLatestTime() {
				let l = this.postList.length
				if (l === 0) return new Date().getTime();
				else return new Date(this.postList[l - 1].date).getTime()

			},
			hisFans() {
				uni.navigateTo({
					url: "../my/subscribe_list/subscribe_list?type=3&uid=" + this.user.uid
				})
			},
			hisSubscribe() {
				uni.navigateTo({
					url: "../my/subscribe_list/subscribe_list?type=4&uid=" + this.user.uid
				})
			}
		},
		onReachBottom() {
			//TODO:获取后面的post
			if (this.more)
				this.getPostList(this.user.uid, this.getLatestTime())
		},
		onLoad(option) {

			for (let i = 0; i < 100; i++) {
				this.likes.push(false)
			}
			let uid = option.uid
			this.getUserInfo(uid)
			this.getFans(uid)
			this.getSubsribe(uid)
			this.getPost(uid)
			this.isSubscribeFun(uid);
			this.getPostList(uid, new Date().getTime())
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		width: 100%;
		height: 400rpx;
		background-image: url("@/static/img/my/back3.jpg");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.avatar {
		position: absolute;
		top: 320rpx;
		left: 40rpx;
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		border: 8rpx solid #FFFFFF;
	}

	.btn {
		position: absolute;
		top: 450rpx;
		right: 30rpx;
		display: flex;

		.sub {
			display: flex;
			align-items: center;
			justify-items: center;
			font-size: 35rpx;
			color: #FFFFFF;
			background-color: #19A3FE;
			padding: 7rpx 70rpx;
			border-radius: 10rpx;
			margin-right: 30rpx;
		}

		.chat {
			display: flex;
			align-items: center;
			justify-items: center;
			font-size: 35rpx;
			color: #19A3FE;
			border: 2rpx solid #19A3FE;
			padding: 7rpx 15rpx;
			border-radius: 10rpx;
		}
	}

	.padding {
		height: 135rpx;
	}

	.body {
		margin: 0 auto;
		width: 90%;
	}

	.username {
		font-size: 50rpx;
		font-weight: bold;
		max-width: 500rpx;
		overflow-y: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.uid {
		font-size: 30rpx;
		margin: 15rpx 0;
	}

	.div {
		height: 5rpx;
		background-color: #F6F6F6;
		margin: 30rpx 0;
	}

	.div_h {
		height: 15rpx;
		background-color: #F6F6F6;
		margin: 30rpx 0;
	}

	.inf {
		display: inline-block;
		padding-right: 40rpx;
		color: #C1C6C9;
		font-size: 30rpx;
	}

	.num {
		color: #000;
		font-size: 40rpx;
		padding-right: 8rpx;
	}

	.item {
		text-align: center;
		font-size: 35rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #d5d5d5;
	}

	.card {
		border-bottom: 15rpx solid #F6F6F6;
	}

	.more {
		text-align: center;
		padding: 20rpx;
		font-size: 30rpx;
		color: #9a9a9a;
	}
</style>
